<template>
  <div class="start">
    <h5>精选VIP课</h5>
    <span @click="goSearchList">更多></span>
  </div>

  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="热门分类" name="first">
      <template v-if="vipClass.length >= 10" v-for="(item, index) in 10">
        <div class="img" @click="classdetail(vipClass[0][index].id)">
          <div>
            <el-image
              style="width: 100%; height: 100%"
              :src="vipClass[0][index].img"
              fit="fit"
            />
          </div>
          <p>{{ vipClass[0][index].className }}</p>
          <p>
            {{ vipClass[0][index].totalVideoTime }}分钟 |
            {{ vipClass[0][index].teacherId }}
          </p>
          <p>
            <span>
              <template v-if="vipClass[0][index].classType == 0">
                免费
              </template>
              <template v-else> VIP专项 </template> </span
            >近{{ vipClass[0][index].enlistsNum }}人报名
          </p>
        </div>
      </template>
      <template v-else v-for="(item, index) in vipClass[0]">
        <div class="img" @click="classdetail(item.id)">
          <div>
            <el-image
              style="width: 100%; height: 100%"
              :src="item.img"
              fit="fit"
            />
          </div>
          <p>{{ item.className }}</p>
          <p>
            {{ item.totalVideoTime }}分钟 |
            {{ item.teacherId }}
          </p>
          <p>
            <span>
              <template v-if="item.classType == 0"> 免费 </template>
              <template v-else> VIP专项 </template> </span
            >近{{ item.enlistsNum }}人报名
          </p>
        </div>
      </template>
    </el-tab-pane>
    <el-tab-pane label="无限" name="second">Config</el-tab-pane>
    <el-tab-pane label="java进阶" name="third">Role</el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import type { TabsPaneContext } from "element-plus";
import OneCourse from "@/components/front/OneCourse.vue";
import { selectVip } from "@/api/student/he/frontMain";
import router from "@/router";

const activeName = ref("first");
let vipClass: any = reactive([]);
onMounted(() => {
  selectVip().then((res) => {
    // console.log(res);
    vipClass.length = 0;
    if ((res.data.msg = "请求成功")) {
      // console.log(res);

      vipClass.push(res.data.data);
    }
  });
});

// 去往课程详情
const classdetail = (id: any) => {
  router.push({ path: "/FrontPaidClass", query: { id: id } });
};

//去往搜索
const goSearchList = () => {
  router.push("/search");
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style>
h5 {
  text-align: center;
}
.start {
  position: relative;
}
.start span {
  font-size: 12px;
  position: absolute;
  right: 20px;
  z-index: 5;
  /* margin-top: 10px; */
  cursor: pointer;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.el-tabs_content {
  padding: 0;
}
.classify {
  /* display: flex; */
  float: left;
}
</style>
